﻿@model BuildJavasciptDataModel_Test.DataModels.NestedModel
@using System.Web.Mvc.Html
@using BuildJavascriptDataModel
@{
    ViewBag.Title = "Index";
}
<h2>
    Nested Class Model Testing</h2>
<div>
   <div>This demo also shows off <a href="https://github.com/phototom/ko-autobind" target="_blank" >ko-autobind</a> library by the same
   author as this project.  This JavaScript library will automatically add the data-bind statements required by knockoutjs to bind
   the data-model to the html.</div>
   <div>
   To see how BuildJavascriptDataModel works, please review the razor view code and the generated html in your browser
</div>
<fieldset id="bindThis" class='demoTable'>
    <legend></legend>
    <table>
        <tr>
            <td class="editor-label">
                @Html.LabelFor(model => model.IntProperty)
            </td>
            <td class="editor-field">
                @Html.EditorFor(model => model.IntProperty)
                @Html.ValidationMessageFor(model => model.IntProperty)
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="editor-label">
                @Html.LabelFor(model => model.SimpleProperty)
            </td>
            <td class="editor-field">
                @Html.EditorFor(model => model.SimpleProperty)
                @Html.ValidationMessageFor(model => model.SimpleProperty)
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        @Html.Partial("editbasicmodel")
    </table>
</fieldset>
<script type="text/javascript">
    $(document).ready(function () {

        // implicitly getting type from view model
        @Html.BuildJsPrototype("nestedModel")

        viewModel = {};
        var b = nestedModel();
        viewModel.model = ko.observable(b);

        $.ajax({
            url: 'NestedModel/GetModel',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                var t = ko.mapping.fromJS(data);
                viewModel.model(t);


                // var obDetail = ko.observable('obDetailText');
                // viewModel.observedVar = ko.observable(t);
                // viewModel.t1 = ko.observable(obDetail);
            }
        });

        // use auto bind to add knockout data-bind to fields that needed it
        ko.autoBind.byName('#bindThis', 'model().');

        // because we already have model built, we can now
        // have knockout connect the data models with input fields
        ko.applyBindings(viewModel);


    });

</script>
